<template>
  <BaseBreadcrumb>
    <!-- 分包商用户管理 -->
    <div class="subcontractorManage-container">
      <a-row :gutter="10" class="page-height">
        <a-col :span="6">
          <a-card class="page-height-tree">
            <title-name title="公司组织架构" />
            <!-- 公司组织树搜索 -->
            <tree-organization
              ref="treeOrganization"
              :expand-by-auto="true"
              :lazy-load-fn="getSubContractorList"
              :show-search="false"
              :selected-keys.sync="selectedKeys"
              :select-options.sync="selectOptions"
              :istakeOutHight="true"
              :org-query="{
                containTags: containTags,
                 baseOrgType: 0, // 是否基础组织 0否 1是
                 containVirtual: 0, //是否包含虚拟组织 0包含 1 不包含
                 systemOrgType: 1 //公司组织默认1

              }"
            />
          </a-card>
        </a-col>
        <a-col :span="18" class="page-height-list-wrapper">
          <CommonUserList
            ref="commonUserList"
            user-type="subcontractor"
            :search-query="searchQuery"
          />
        </a-col>
      </a-row>
    </div>
  </BaseBreadcrumb>
</template>

<script>
import { getSubContractorListByOrg } from '@/api/system/systemUserManage.js'
import CommonUserList from '../CommonUserList.vue'
import TreeOrganization from '@/components/businessComponents/TreeOrganization' // 树
export default {
  name: 'SubcontractorManage',
  components: {
    TreeOrganization,
    CommonUserList,
  },
  data() {
    return {
      searchQuery: {},
      selectedKeys: [], // 选中节点
      selectOptions: {}, // 选中节点对象
    }
  },
  computed: {
    containTags(){
      return this.$store.getters['GET_ORGLABEL'].map(item => item.code)
    }
  },
  watch: {
    selectedKeys: {
      handler(list) {
        if (list && list.length > 0) {
          this.searchQuery = {
            orgId: list[0],
          }
          this.$refs.commonUserList.handleSearch(this.searchQuery)
        }
      },
    },
  },
  mounted() {
    // 组织树获取数据
    this.$refs.treeOrganization.getList().then()
  },
  methods: {
    /**
     * 根据项目部orgId获取分包商，用于组织树懒加载
     */
    getSubContractorList(id) {
      const params = {
        id: id,
      }
      return new Promise((resolve, reject) => {
        getSubContractorListByOrg(params)
          .then((res) => {
            const list = res.data || []
            resolve({
              data: list.map(item => {
                return {
                  ...item,
                  key: item.orgId,
                  title: item.subContractorName
                }
              })
            })
          })
          .catch((e) => {
            console.error(e)
            reject(e)
          })
      })
    },
  },
}
</script>

<style>
</style>